import { createContext, useContext, useState } from "react";
import { ChildComponent2 } from "./ChildComponent2";
/**
 * useContext
 * 入参
context：是 createContext 创建出来的对象，他不保持信息，他是信息的载体。声明了可以从组件获取或者给组件提供信息。
返回值
返回传递的Context的值，并且是只读的。如果 context 发生变化，React 会自动重新渲染读取 context 的组件
通过createContext创建，不需要具体参数，通过组件value传递数据，子组件通过useContext获取数据
 */
export interface ITheme {
  themeColor: string;
  setThemeColor: (color: string) => void;
}
export const ThemeContext = createContext<ITheme>({} as ITheme);

function ChildComponent1() {
  // 使用
  const { themeColor, setThemeColor } = useContext(ThemeContext);
  return (
    <div>
      <p>子组件</p>
      <p style={{ color: themeColor }}>主题颜色：{themeColor}</p>
      <button onClick={() => setThemeColor("red")}>红色</button>
      <button onClick={() => setThemeColor("blue")}>蓝色</button>
      <ChildComponent2></ChildComponent2>
    </div>
  );
}

export function UseContextDemo() {
  const [defaultColor, setDefaultColor] = useState("blue");
  return (
    <div>
      <h3>useContext使用=======》》》</h3>

      <button onClick={() => setDefaultColor("yellow")}>父组件更新颜色</button>

      {/* v18 */}
      {/* <ThemeContext.Provider
        value={{ themeColor: defaultColor, setThemeColor: setDefaultColor }}
      >
        <ChildComponent1 />
      </ThemeContext.Provider> */}

      {/* v19 不需要Provider */}
      <ThemeContext
        value={{ themeColor: defaultColor, setThemeColor: setDefaultColor }}
      >
        <ChildComponent1 />
      </ThemeContext>
    </div>
  );
}
